<template>
  <div>
    <div>
      <el-row style="background: white">
        <el-col >
            <div class="tbUpDiv">
              <div style="display: flex">
                 <img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg">
                 <div class="tbUpPost">简历中心</div>
              </div>
          <div style="width: 160px;">
            <el-button type="primary" class="tbUpButt" @click="d.formJobPost = true">新增</el-button>
            <el-button type="primary" class="tbUpButt" @click="eaxy()">导出</el-button>
          </div>
        </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
              <el-button @click="hidddiv=!hidddiv" class="tbFirstBu">高级搜索</el-button>
              <div class="tbScenDiva" v-if="hidddiv">
                <div style="border-bottom:1px solid gainsboro;height: 40px"><span style="font-size: 10px;margin-left:30px;line-height: 40px">查询条件</span></div>
                <div style="font-size: 10px;">
                  <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span style="margin-left: 22px">姓名：</span>    <el-input v-model="souForm.resumeName" @keyup.enter="JobMohu()" style="height: 30px;width: 300px;"/></div>
                  <div><span style="margin-left: 38px">姓别：</span>
                    <el-select style="height:30px;width: 300px" v-model="souForm.resumeSex">
                      <el-option label="男" value="男" @click="JobMohu()"/>
                      <el-option label="女" value="女" @click="JobMohu()"/>
                    </el-select>
                  </div>
                  </div>
                <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span>应聘岗位：</span>    <el-input v-model="souForm.resumeJob" @keyup.enter="JobMohu()"  style="height:30px;width: 300px"/></div>
                    <div><span>人才渠道来源：</span>
                      <el-select style="height:30px;width: 300px" v-model="souForm.resumeType">
                        <el-option label="主动投递" value="0" @click="JobMohu()"/>
                        <el-option label="招聘网站收集" value="1" @click="JobMohu()"/>
                      </el-select>
                    </div>
                </div>
                <div style="display: flex;height: 60px;margin-left:135px;">
                  <div><span>简历状态：</span>
                    <el-select style="height:30px;width: 300px" v-model="souForm.resumeState">
                      <el-option label="处理中" value="0" @click="JobMohu()"/>
                      <el-option label="已查收" value="1" @click="JobMohu()"/>
                    </el-select>
                  </div>
                </div>
                </div>
                <div style="border-top: 1px solid gainsboro;height: 50px">
                  <el-button type="primary" style="margin-left: 330px;margin-top: 10px" @click="JobMohu()">搜索</el-button>
                  <el-button style="margin-left:260px;margin-top: 10px" @click="chZhi()">重置</el-button>
                  <el-button style="margin-left:330px;margin-top: 10px" @click="reSulfas(),hidddiv=false">取消</el-button>
                </div>
              </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :data="d.tableData" style="width: 100%">
            <el-table-column  align='center' prop="resumeName" label="姓名" width="130" />
            <el-table-column  align='center' prop="resumePhone" label="电话号码" width="130" />
            <el-table-column  align='center' prop="resumeSex" label="性别" width="150" />
            <el-table-column align='center'  prop="resumeWorkdate" label="工作经验" width="150" >
              <template #default="s">
                <span v-if="s.row.resumeWorkdate!=null">{{s.row.resumeWorkdate}}年</span>
              </template>
            </el-table-column>
            <el-table-column  align='center' prop="resumeType" label="人才渠道来源" width="150">
              <template #default="s">
                <span v-if="s.row.resumeType==0">主动投递</span>
                <span v-if="s.row.resumeType==1">招聘网站收集</span>
              </template>
            </el-table-column>
            <el-table-column   align='center' prop="resumeJob" label="应聘岗位" width="150" />
            <el-table-column align='center'  prop="resumeDate" label="简历投递时间" width="150" />
            <el-table-column align='center' prop="resumeState" label="简历状态" width="150">
              <template #default="s">
                <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.resumeState==0">处理中</div>
                <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.resumeState==1">已查收</div>
              </template>
            </el-table-column>
            <el-table-column align='center' label="操作">
              <template #default ="s" >
                <el-button v-if="s.row.resumeState==1" @click="JoinPernel(s.row)">加入人才库</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col>
          <el-pagination
              v-model:currentPage="d.pageNo"
              v-model:page-size="d.pageSize"
              :page-sizes="[5,10, 20, 30, 40]"
              small="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="d.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="d.formJobPost" title="简历新增" style="text-align: center">
      <el-form :rules="bookRule"  :model="form" ref="postForm" label-width="120px">
        <el-form-item prop="resumeName" label="姓名">
          <el-input v-model="form.resumeName" />
        </el-form-item>
        <el-form-item label="姓别">
          <el-select v-model="form.resumeSex" placeholder="请选择">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item prop="resumePhone" label="电话号码">
          <el-input v-model="form.resumePhone" />
        </el-form-item>
        <el-form-item prop="resumeWorkdate" label="工作经验">
          <el-input v-model="form.resumeWorkdate"  placeholder="单位(年)" oninput="value=value.replace(/[^0-9.]/g,'')"/>
        </el-form-item>
        <el-form-item label="人才渠道来源">
          <el-select v-model="form.resumeType" placeholder="请选择">
            <el-option label="主动投递" value="0" />
            <el-option label="招聘网站" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="应聘岗位">
<!--          <el-input v-model="form.resumeJob" />-->
          <el-select v-model="form.resumeJob" placeholder="请选择">
          <el-option
              v-for="item in d.typeDate"
              :key="item.jobdemandName"
              :label="item.jobdemandName"
              :value="item.jobdemandName"

          />
        </el-select>
        </el-form-item>
        <el-form-item label="工作业绩">
          <el-input v-model="form.resumeAchievement" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(postForm)">确定</el-button>
          <el-button @click="resetForm(postForm)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount,toRefs,reactive,ref } from 'vue'
import {ElMessage, FormInstance, FormRules,ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {useRouter} from "vue-router";
// do not use same name with ref
import axios from "axios";
import {log} from "util";
import moment from "moment";

let riqi = moment(new Date()).format("YYYY-MM-DD hh:mm:ss")
const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  formJobPost:false,
  //数据
  tableData:[],
  //下拉框部门数组
  typeDate:[],
});
const form = reactive({
  resumeId:'',
  resumeName:'',
  resumeSex:'',
  resumeJob:'',
  resumeState:1,
  resumeDate:riqi,
  resumeType:'',
  resumeWorkdate:'',
  resumePhone:'',
  resumeAchievement:'',
})
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
const getDate =()=>{
  axios.post("http://localhost:1688/resume/selectresume").then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
}
//新增简历
//定义表单组件对象
const postForm = ref<FormInstance>();
//表单校验
const bookRule = reactive<FormRules>({
  resumeName:[
    {required:true,message:'请输入姓名',trigger:['blur','change']},
  ],
  resumePhone:[
    {required:true,message:'请输入手机号码',trigger:['blur','change']},
    {type:'number',message:'手机号格式不正确',trigger: 'blur', transform (value) {
        var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
        if (!phonereg.test(value)) {
          return false
        }else{
          return Number(value)
        }
      }}
  ],
  resumeWorkdate:[
    {required:true,message:'请输入工作经验',trigger:['blur','change']},
  ],
})
//清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.resumeId='',
      form.resumeName='',
      form.resumeSex='',
      form.resumeJob='',
      form.resumeState=1,
      form.resumeDate='',
      form.resumeType='',
      form.resumeWorkdate='',
      d.formJobPost = false;
}
//查询岗位需求表职位需求
const resumeJOB = () => {
  axios.post("http://localhost:1688/jobdemand/selectJobdemandState/"+1).then((res)=>{
    d.typeDate=res.data.data
    console.log("岗位需求职位")
  })
}
//保存表单
//formEl代表当前表单组件对象
const onSubmit = async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//校验通过
      axios.post("http://localhost:9884/resume/addResume",form)
          .then((res)=>{
            getDate()
            d.formJobPost = false;
          })
      console.log(form)
    } else {
      ElMessage.error('error submit!');
    }
  })
}
//高级搜索
//定义查询数组
const souForm = reactive({
  resumeName:'',
  resumeSex:'',
  resumeJob:'',
  resumeState:'',
  resumeType:'',
})
//模糊搜索
const JobMohu=()=>{
  axios.post("http://localhost:9884/resume/selsectResuMoHu",souForm).then((res)=> {
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
    console.log(res.data.data)
  })
  console.log(souForm)
}
//重置搜索框
const chZhi=()=>{
      souForm.resumeName='',
      souForm.resumeSex='',
      souForm.resumeJob='',
      souForm.resumeState='',
      souForm.resumeType=''
      getDate()
}
//取消
const reSulfas=()=>{
  chZhi()
}
//人才库数据
const pronel = reactive({
  personnelId:'',
  personnelName:'',
  jobdemandName:'',
  personnelSteta:0,
  personnelPhone:'',
  personnelDate:'',
  personnelType:'',
  personnelAchievement:'',
  personnelSpeciality:'',
})
let str = moment(new Date()).format("YYYY-MM-DD")
//加入人才库
const JoinPernel = (row) => {
  ElMessageBox.prompt('请输入举荐的原因', '加入人才库', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
      .then(({ value }) => {
        axios.post("http://localhost:9884/personnels/selsectPhone/"+row.resumePhone)
            .then((res)=>{
              if (res.data.data.length>0){
                ElMessage.error('重复加入人才库');
              }else {
                pronel.personnelName=row.resumeName,
                    pronel.jobdemandName=row.resumeJob,
                    pronel.personnelPhone=row.resumePhone,
                    pronel.personnelDate=str,
                    pronel.personnelType=row.resumeType
                    pronel.personnelAchievement=row.resumeAchievement
                    pronel.personnelSpeciality=value
                //新增
                axios.post("http://localhost:9884/personnels/addPersonnel/"+0+"/"+row.resumeId,pronel)
                    .then((res)=>{
                      ElMessage({
                        showClose: true,
                        message: '加入成功',
                        type: 'success',
                      })
                      getDate()
                    })
              }

            })
        console.log(pronel)
      })

}
//导出方法
const eaxy=()=>{
    //导出内容list d.tableData

    // axios.post("http://localhost:1688/resume/excelResume/"+ d.tableData).then((res)=>{
    //   console.log("成功")
    // })

}
onBeforeMount(function () {
  getDate()
  resumeJOB()
})
</script>

<style scoped>
.tbUpDiv{
  /*position: relative;*/
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tbImg{
  margin-left: 20px;
}
.tbUpButt{
}
.tbUpPost{
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.tbScenDiv{
  position: relative;
}
.tbFirstBu{
  margin-left: 1180px;
  margin-top: 10px;
}

</style>